<template>
  <div class="video">
    <el-row>
      <el-col :span="4" style="height: 100%;">
        <h4>视频列表</h4>
        <el-divider style="width: 75%; margin: 10px 0; overflow-y: auto" />

        <el-tree
            ref="treeRef"
            style="max-width: 600px"
            show-checkbox
            default-expand-all
            node-key="id"
            highlight-current
            :data="data"
            :props="defaultProps"
            :default-expanded-keys="firstAndSecondLevelKeys"
        />

      </el-col>
      <el-col :span="20">
        <div v-if="screenNumber === 1">
        <el-row>
          <el-col style="height: 660px;">
            <video :src="currentCode" controls></video>
          </el-col>
        </el-row>
      </div>
        <div v-if="screenNumber === 4">
          <el-row :gutter="1">
            <el-col
                :span="12"
                v-for="(code, index) in currentCodes.slice(0, 4)"
                :key="index"
                style="height: 340px;"
                class="video-container"
            >
              <video :src="code" controls ></video>
            </el-col>
          </el-row>
        </div>
        <div v-if="screenNumber === 9">
          <el-row :gutter="1">
            <el-col
                :span="8"
                v-for="(code, index) in currentCodes.slice(0, 9)"
                :key="index"
                style="height: 227px;"
                class="video-container"
            >
              <video :src="code" controls></video>
            </el-col>
          </el-row>
        </div>
        <div v-if="screenNumber === 16">
          <el-row :gutter="1">
            <el-col
                :span="6"
                v-for="(code, index) in currentCodes.slice(0, 16)"
                :key="index"
                style="height: 165px;"
                class="video-container"
            >
              <video :src="code" controls></video>
            </el-col>
          </el-row>
        </div>
        <div v-if="screenNumber === 25">
          <el-row :gutter="1">
            <el-col
                :span="4.8"
                v-for="(code, index) in currentCodes.slice(0, 25)"
                :key="index"
                style="height: 130px;"
                class="video-container"
            >
              <video :src="code" controls></video>
            </el-col>
          </el-row>
        </div>
        <div v-if="screenNumber === 100">
          <el-row :gutter="1">
            <el-col
                :span="2.4"
                v-for="(code, index) in currentCodes.slice(0, 100)"
                :key="index"
                style="height: 65px;"

                class="video-container"
            >
              <video :src="code" controls></video>
            </el-col>
          </el-row>
        </div>
        <el-row v-if="true" class="video-button">
          <el-button @click="changeScreen(1)">1分屏</el-button>
          <el-button @click="changeScreen(4)">4分屏</el-button>
          <el-button @click="changeScreen(9)">9分屏</el-button>
          <el-button @click="changeScreen(16)">16分屏</el-button>
          <el-button @click="changeScreen(25)">25分屏</el-button>
          <el-button @click="changeScreen(100)">100分屏</el-button>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script lang="ts" setup>
import { ref} from 'vue';
import { ElTree } from 'element-plus';


interface Tree {
  id: number;
  label: string;
  children?: Tree[];
}

const treeRef = ref<InstanceType<typeof ElTree>>();
const data: Tree[] = [
  {
    id: 530000,
    label: '云南省',
    children: [
      {
        id: 530100,
        label: '昆明市',
        children: [
          {
            id: 530102,
            label: '五华区'
          },
          {
            id: 530103,
            label: '盘龙区'
          },
          {
            id: 530111,
            label: '官渡区'
          },
          {
            id: 530112,
            label: '西山区'
          },
          {
            id: 530113,
            label: '东川区'
          },
          {
            id: 530114,
            label: '呈贡区'
          },
          {
            id: 530115,
            label: '晋宁区'
          },
          {
            id: 530124,
            label: '富民县'
          },
          {
            id: 530125,
            label: '宜良县'
          },
          {
            id: 530126,
            label: '石林彝族自治县'
          },
          {
            id: 530127,
            label: '嵩明县'
          },
          {
            id: 530128,
            label: '禄劝彝族苗族自治县'
          },
          {
            id: 530129,
            label: '寻甸回族彝族自治县'
          },
          {
            id: 530181,
            label: '安宁市'
          }
        ]
      },
      {
        id: 530300,
        label: '曲靖市',
        children: [
          {
            id: 530302,
            label: '麒麟区'
          },
          {
            id: 530303,
            label: '沾益区'
          },
          {
            id: 530304,
            label: '马龙区'
          },
          {
            id: 530322,
            label: '陆良县'
          },
          {
            id: 530323,
            label: '师宗县'
          },
          {
            id: 530324,
            label: '罗平县'
          },
          {
            id: 530325,
            label: '富源县'
          },
          {
            id: 530333,
            label: '会泽县'
          },
          {
            id: 530381,
            label: '宣威市'
          }
        ]
      },
      {
        id: 530400,
        label: '玉溪市',
        children: [
          {
            id: 530402,
            label: '红塔区'
          },
          {
            id: 530403,
            label: '江川区'
          },
          {
            id: 530423,
            label: '通海县'
          },
          {
            id: 530424,
            label: '华宁县'
          },
          {
            id: 530425,
            label: '易门县'
          },
          {
            id: 530426,
            label: '峨山彝族自治县'
          },
          {
            id: 530427,
            label: '新平彝族傣族自治县'
          },
          {
            id: 530428,
            label: '元江哈尼族彝族傣族自治县'
          }
        ]
      },
      {
        id: 530500,
        label: '保山市',
        children: [
          {
            id: 530502,
            label: '隆阳区'
          },
          {
            id: 530521,
            label: '施甸县'
          },
          {
            id: 530581,
            label: '腾冲市'
          },
          {
            id: 530523,
            label: '龙陵县'
          },
          {
            id: 530524,
            label: '昌宁县'
          }
        ]
      },
      {
        id: 530600,
        label: '昭通市',
        children: [
          {
            id: 530602,
            label: '昭阳区'
          },
          {
            id: 530621,
            label: '鲁甸县'
          },
          {
            id: 530622,
            label: '巧家县'
          },
          {
            id: 530623,
            label: '盐津县'
          },
          {
            id: 530624,
            label: '大关县'
          },
          {
            id: 530625,
            label: '永善县'
          },
          {
            id: 530626,
            label: '绥江县'
          },
          {
            id: 530627,
            label: '镇雄县'
          },
          {
            id: 530628,
            label: '彝良县'
          },
          {
            id: 530629,
            label: '威信县'
          },
          {
            id: 530681,
            label: '水富市'
          }
        ]
      },
      {
        id: 530700,
        label: '丽江市',
        children: [
          {
            id: 530702,
            label: '古城区'
          },
          {
            id: 530721,
            label: '玉龙纳西族自治县'
          },
          {
            id: 530722,
            label: '永胜县'
          },
          {
            id: 530723,
            label: '华坪县'
          },
          {
            id: 530724,
            label: '宁蒗彝族自治县'
          }
        ]
      },
      {
        id: 530800,
        label: '普洱市',
        children: [
          {
            id: 530802,
            label: '思茅区'
          },
          {
            id: 530821,
            label: '宁洱哈尼族彝族自治县'
          },
          {
            id: 530822,
            label: '墨江哈尼族自治县'
          },
          {
            id: 530823,
            label: '景东彝族自治县'
          },
          {
            id: 530824,
            label: '景谷傣族彝族自治县'
          },
          {
            id: 530825,
            label: '镇沅彝族哈尼族拉祜族自治县'
          },
          {
            id: 530826,
            label: '江城哈尼族彝族自治县'
          },
          {
            id: 530827,
            label: '孟连傣族拉祜族佤族自治县'
          },
          {
            id: 530828,
            label: '澜沧拉祜族自治县'
          },
          {
            id: 530829,
            label: '西盟佤族自治县'
          }
        ]
      },
      {
        id: 530900,
        label: '临沧市',
        children: [
          {
            id: 530902,
            label: '临翔区'
          },
          {
            id: 530921,
            label: '凤庆县'
          },
          {
            id: 530922,
            label: '云县'
          },
          {
            id: 530923,
            label: '永德县'
          },
          {
            id: 530924,
            label: '镇康县'
          },
          {
            id: 530925,
            label: '双江拉祜族佤族布朗族傣族自治县'
          },
          {
            id: 530926,
            label: '耿马傣族佤族自治县'
          },
          {
            id: 530927,
            label: '沧源佤族自治县'
          }
        ]
      },
      {
        id: 532300,
        label: '楚雄彝族自治州',
        children: [
          {
            id: 532301,
            label: '楚雄市'
          },
          {
            id: 532322,
            label: '双柏县'
          },
          {
            id: 532323,
            label: '牟定县'
          },
          {
            id: 532324,
            label: '南华县'
          },
          {
            id: 532325,
            label: '姚安县'
          },
          {
            id: 532326,
            label: '大姚县'
          },
          {
            id: 532327,
            label: '永仁县'
          },
          {
            id: 532328,
            label: '元谋县'
          },
          {
            id: 532329,
            label: '武定县'
          },
          {
            id: 532331,
            label: '禄丰市'
          }
        ]
      },
      {
        id: 532500,
        label: '红河哈尼族彝族自治州',
        children: [
          {
            id: 532501,
            label: '个旧市'
          },
          {
            id: 532502,
            label: '开远市'
          },
          {
            id: 532503,
            label: '蒙自市'
          },
          {
            id: 532524,
            label: '建水县'
          },
          {
            id: 532525,
            label: '石屏县'
          },
          {
            id: 532526,
            label: '弥勒市'
          },
          {
            id: 532527,
            label: '泸西县'
          },
          {
            id: 532528,
            label: '元阳县'
          },
          {
            id: 532529,
            label: '红河县'
          },
          {
            id: 532531,
            label: '绿春县'
          },
          {
            id: 532532,
            label: '金平苗族瑶族傣族自治县'
          },
          {
            id: 532533,
            label: '河口瑶族自治县'
          }
        ]
      },
      {
        id: 532600,
        label: '文山壮族苗族自治州',
        children: [
          {
            id: 532601,
            label: '文山市'
          },
          {
            id: 532622,
            label: '砚山县'
          },
          {
            id: 532623,
            label: '西畴县'
          },
          {
            id: 532624,
            label: '麻栗坡县'
          },
          {
            id: 532625,
            label: '马关县'
          },
          {
            id: 532626,
            label: '丘北县'
          },
          {
            id: 532627,
            label: '广南县'
          },
          {
            id: 532628,
            label: '富宁县'
          }
        ]
      },
      {
        id: 532800,
        label: '西双版纳傣族自治州',
        children: [
          {
            id: 532801,
            label: '景洪市'
          },
          {
            id: 532822,
            label: '勐海县'
          },
          {
            id: 532823,
            label: '勐腊县'
          }
        ]
      },
      {
        id: 532900,
        label: '大理白族自治州',
        children: [
          {
            id: 532901,
            label: '大理市'
          },
          {
            id: 532922,
            label: '漾濞彝族自治县'
          },
          {
            id: 532923,
            label: '祥云县'
          },
          {
            id: 532924,
            label: '宾川县'
          },
          {
            id: 532925,
            label: '弥渡县'
          },
          {
            id: 532926,
            label: '南涧彝族自治县'
          },
          {
            id: 532927,
            label: '巍山彝族回族自治县'
          },
          {
            id: 532928,
            label: '永平县'
          },
          {
            id: 532929,
            label: '云龙县'
          },
          {
            id: 532930,
            label: '洱源县'
          },
          {
            id: 532931,
            label: '剑川县'
          },
          {
            id: 532932,
            label: '鹤庆县'
          }
        ]
      },
      {
        id: 533100,
        label: '德宏傣族景颇族自治州',
        children: [
          {
            id: 533103,
            label: '芒市'
          },
          {
            id: 533122,
            label: '梁河县'
          },
          {
            id: 533123,
            label: '盈江县'
          },
          {
            id: 533124,
            label: '陇川县'
          },
          {
            id: 533102,
            label: '瑞丽市'
          }
        ]
      },
      {
        id: 533300,
        label: '怒江傈僳族自治州',
        children: [
          {
            id: 533301,
            label: '泸水市'
          },
          {
            id: 533321,
            label: '福贡县'
          },
          {
            id: 533322,
            label: '贡山独龙族怒族自治县'
          },
          {
            id: 533323,
            label: '兰坪白族普米族自治县'
          }
        ]
      },
      {
        id: 533400,
        label: '迪庆藏族自治州',
        children: [
          {
            id: 533401,
            label: '香格里拉市'
          },
          {
            id: 533422,
            label: '德钦县'
          },
          {
            id: 533423,
            label: '维西傈僳族自治县'
          }
        ]
      }
    ]
  }

];

const firstAndSecondLevelKeys = ref<number[]>([]);
const defaultProps = {
  children: 'children',
  label: 'label'
};

const screenNumber = ref(1);
// 创建一个包含视频URL的数组
const generateVideoUrls = () => {
  let videoUrls = [];
  for (let i = 1; i <= 100; i++) {
    videoUrls.push(`https://example.com/video${i}.mp4`);
  }
  return videoUrls;
};

// 使用ref来创建一个响应式的数组
const currentCodes = ref(generateVideoUrls());
const currentCode = ref(currentCodes.value[0]);


// 切换分屏数量
function changeScreen(number: number) {
  screenNumber.value = number;
  if (number === 1) {
    currentCode.value = currentCodes.value[0];
  }
}
</script>

<style scoped>
video {
  width: 100%;
  height: 100%;
}
.video-container {
  height: 100%; /* 根据需要调整高度 */
  margin-bottom: 0.15%; /* 调整上下间隔 */
}
.video-button{
  margin-bottom: 10px;
  margin-top: 10px;
  justify-content: right;

}
</style>